<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>主页-成都华联</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="layui/css/layui.css" media="all">
        <script src="layui/layui.js" charset="utf-8"></script>
        <script>var $ = layui.jquery;</script>
    </head>

    <body>

    <table class="layui-hide" id="userList" lay-filter="userList"></table>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-input-inline">
            <input type="text" name="searchInput" placeholder="姓名/手机号"
                   autocomplete="off" id="searchInput"
                   class="layui-input">
        </div>
        <button class="layui-btn layui-btn-sm" lay-event="search">搜索</button>
        <button class="layui-btn layui-btn-sm" lay-event="exportUsers">导出</button>
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="details">查看积分明细</a>
    </script>

    <script>
        layui.use(['form', 'table'], function () {
            var table = layui.table,
                form = layui.form
            table.render({
                elem: '#userList'
                , url: '/user'
                , headers: {"method": "selectByPage"}
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , title: '会员信息列表'
                , cols: [[
                    {
                        field: 'id',
                        title: '序号',
                        width: 100,
                        fixed: 'left',
                        align: 'center',
                        unresize: true,
                        sort: true
                    }
                    , {field: 'phone', title: '手机号', width: 130, align: 'center', sort: true}
                    , {field: 'name', title: '姓名', width: 100, align: 'center', sort: true}
                    , {field: 'regTime', title: '注册时间', width: 180, align: 'center', sort: true}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 120, align: 'center',}
                ]]
                , page: true
                , limit: 10
                , limits: [5, 10]
            });

            //头工具栏事件
            table.on('toolbar(userList)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'search':
                        //发送搜索的ajax请求
                        table.reload('userList', {
                            headers: {"method": "search"},
                            where: {
                                searchString: $("#searchInput").val()
                            }
                            , page: {
                                curr: 1 //重新从第 1 页开始
                            }
                            , parseData: function (result) {
                                layer.msg("搜索到"+result.count+"条记录");
                            }
                        });
                        break;
                    case 'exportUsers':
                        layer.msg("导出中...");
                        window.location.href = '/userExport';
                        break;
                }
            });

            //监听行工具事件
            table.on('tool(userList)', function (obj) {
                var data = obj.data;
                // console.log(data)
                if (obj.event === 'details') {
                    layer.msg("详情功能开发中...");
                }
            });

        });
    </script>

    </body>


    <script>
        if(!window.localStorage.getItem('wzphone')){
            window.location.href='/UserLogin.html';
        }
        var phone = window.localStorage.getItem('wzphone');
        $.ajax({
            url: "/user"
            , type: "post"
            , headers: {"method": "myInf"}
            , data: {
                "phone": phone
            }
            , dataType: "json"
            , success: function (result) {
                if (result.code == 0) {
                    // var date = result.data.regTime;
                    $("#name").html(result.data.name);
                    $("#phone").html(result.data.phone);
                    $("#regTime").html(result.data.regTime);
                }
            }
        })
    </script>
</html>